<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        .contain-child {
            width: 400px;
            height: 345px;
            margin: 163px 285px;
            border-radius: 5px;
            background-color: rgb(0, 2, 0, 0);
            /* border: 1px solid rgb(0 5 0 / 15%); */
            align-items: center;
            text-align: center;
            position: absolute;
            font-size: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        img {
            width: 1300px;
            height: 700px;
            left: 50px;
            top: 15px;
            position: absolute;
        }

        input {
            width: 200px;
            margin: 10px;
            height: 25px;
            margin-right: 10px;
            border-radius: 3px;
            border: none;
            cursor: pointer;
        }

        button {
            width: 100px;
            height: 40px;
            background-color: rgb(150, 147, 147);
            border-radius: 3px;
            cursor: pointer;
            border: none;
            margin-right: 120px;
            margin-bottom: 30px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="contain">
        <img src="./img.jpg" alt="">
        <form action="http://localhost:3000/banyuan" method="POST" class="contain-child">
            <label for="">username</label>
            <input type="text" class="username">
            <label for="">password</label>
            <input type="password" class="password">
            <label for="">resume load</label>
            <input type="password" class="repassword">
            <button id="btn" disabled class="btn">注册</button>
        </form>
    </div>
    <script>
        let ele = document.getElementsByClassName('username')[0];
        let password = document.getElementsByClassName('password')[0];
        let pwd = document.getElementsByClassName('repassword')[0];
        let btn = document.getElementById('btn')
    
        let flag1 = false;
        let flag2 = false;
        let flag3 = false;
        ele.onblur = checkUsername;
        function checkUsername(e) {
            let value = e.target.value
            let reg = /^[0-9a-zA-Z_-]{4,16}$/;
            if (reg.test(value)) {
                flag1 = true
            } else {
                flag1 = false
                alert('用户名输入错误')
            }
            checkBtn()
        }
        password.onblur = checkPassword;
        function checkPassword(e) {
            let value = e.target.value
            let reg = /^[0-9a-zA-Z_-]{8,15}$/;
            if (reg.test(value)) {
                flag2 = true
            } else {
                flag2 = false
                alert('密码输入错误')
            }
            checkPwd()
            checkBtn()
        }
        pwd.onblur = checkPwd;
        function checkPwd() {
            let PwdValue = pwd.value;
            let PasswordValue = password.value;
            if (PwdValue === PasswordValue) {
                flag3 = true
            } else if (PwdValue !== PasswordValue && PwdValue != '') {
                flag3 = false
                alert('输入的密码不一致')
            }
            checkBtn()
        }
        // btn.onclick = function () {
        //     alert('登录成功')
        // }
        function checkBtn() {
            if (flag1 && flag2 && flag3) {
                btn.disabled = false;
            } else {
                btn.disabled = true;
            }
        }
    </script>
</body>

</html>